<template>
  <div class="nav-modal_wrapper" v-show="isShow">
    <div class="nav-modal">
      <div class="modal-title">
        <h4>新增</h4>
        <i class="iconfont icon-close" @click="cacelClick"></i>
      </div>
      <div class="modal-content">
        <div>
          <label><i class="iconfont icon-required"></i>分组名称:</label
          ><input type="text" v-model="content.grou" :disabled="isEnable" />
        </div>
        <template v-if="isEnable">
          <div>
            <label><i class="iconfont icon-required"></i>名称:</label
            ><input type="text" v-model="content.title" />
          </div>
        </template>
        <template v-if="isEnable">
          <div><label>地址:</label><input type="text" v-model="content.url" /></div>
          <div><label>图标:</label><input type="text" v-model="content.imgUrl" /></div>
          <div><label>描述:</label><input type="text" v-model="content.description" /></div>
        </template>
      </div>
      <div class="modal-options">
        <button class="cancel" @click="cacelClick">取消</button>
        <button class="primary" @click="queryClick">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: Boolean,
    modalType: String,
    content: Object
  },
  data() {
    return {}
  },
  methods: {
    cacelClick() {
      this.$emit('update:isShow', false)
    },
    queryClick() {
      this.$emit('update:isShow', false)
      this.$emit('queryClick', this.content)
    }
  },
  computed: {
    isEnable() {
      return this.modalType === '2'
    }
  }
}
</script>
